<!-- filename: frontend/src/components/ListControls/ListControls.vue -->
<template>
  <view class="controls-container">
    <!-- 左侧：排序选择 -->
    <!-- 【修改】仅在非评论上下文时显示排序选择器 -->
    <view v-if="context !== 'comments'" class="sort-selector">
      <picker
        mode="selector"
        :range="sortOptions.map(opt => opt.text)"
        :value="selectedSortIndex"
        @change="onSortChange"
      >
        <view class="picker-view">
          <text>{{ currentSortText }}</text>
          <svg class="dropdown-arrow" width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
            <path d="M7 10l5 5 5-5z"/>
          </svg>
        </view>
      </picker>
    </view>
    <!-- 【新增】如果是在评论上下文，显示一个占位符，保持分页器居右 -->
    <view v-else class="sort-selector-placeholder"></view>

    <!-- 右侧：分页器 -->
    <view class="paginator" v-if="pagination.total_pages > 1">
      <button 
        class="page-btn" 
        :disabled="pagination.current_page <= 1"
        @click="changePage(pagination.current_page - 1)"
      >
        ‹
      </button>
      
      <view class="page-info">
        <input 
          class="page-input" 
          type="number" 
          :value="pagination.current_page"
          @confirm="onPageInput" 
        />
        <text class="page-total">/ {{ pagination.total_pages }}</text>
      </view>

      <button 
        class="page-btn" 
        :disabled="pagination.current_page >= pagination.total_pages"
        @click="changePage(pagination.current_page + 1)"
      >
        ›
      </button>
    </view>
    <view v-else class="paginator-placeholder" />
  </view>
</template>

<script setup>
import { computed } from 'vue';

// --- 组件通信 (Props & Emits) ---
const props = defineProps({
  pagination: {
    type: Object,
    required: true,
    default: () => ({
      current_page: 1,
      total_pages: 1,
      total_songs: 0,
    })
  },
  currentSort: {
    type: String,
    default: 'date_desc'
  },
  // 【新增】接收 hasBeenEdited 状态
  hasBeenEdited: {
    type: Boolean,
    default: false
  },
  context: {
    type: String,
    default: 'index'
  }
});

const emit = defineEmits(['update:sort', 'update:page']);

// --- 动态生成排序选项 ---
const allSortOptions = {
  sort_order: { value: 'sort_order', text: '编辑排序' },
  default: { value: 'default', text: '按添加先后' }, // 后端默认排序
    // 公共歌单列表页
  latest: { value: 'latest', text: '按歌单更新排序' },
  collections: { value: 'collections', text: '按歌单点赞数排序' },
  comments: { value: 'comments', text: '按歌单评论数排序' },

  date_desc: { value: 'date_desc', text: '按翻唱日期排序' },
  likes_desc: { value: 'likes_desc', text: '按点赞数排序' },
  comments_desc: { value: 'comments_desc', text: '按评论数排序' },
};

// --- 【最终修正】排序选项的计算逻辑 ---
const sortOptions = computed(() => {
  // 个人歌单详情页的逻辑
  if (props.context === 'playlist') {
    const options = [
      props.hasBeenEdited ? allSortOptions.sort_order : allSortOptions.default,
      allSortOptions.date_desc,
      allSortOptions.likes_desc,
      allSortOptions.comments_desc,
    ];
    return options;
  } 
  // 【新增】公共歌单详情页的逻辑
  else if (props.context === 'public-playlist') {
    // 为 'sort_order' 选项创建一个别名，使其文本显示为 "默认排序"
    const defaultOrderOption = { ...allSortOptions.sort_order, text: '默认排序' };
    
    return [
      defaultOrderOption,
      allSortOptions.date_desc,
      allSortOptions.likes_desc,
      allSortOptions.comments_desc,
    ];
  } 

  // 【新增】全部公共歌单列表页
  else if (props.context === 'public-playlists') {
    return [
      allSortOptions.latest,
      allSortOptions.collections,
      allSortOptions.comments, 
    ];
  }

  // 主页(index)的逻辑
  else {
    return [
      allSortOptions.date_desc,
      allSortOptions.likes_desc,
      allSortOptions.comments_desc,
    ];
  }
});

// --- 后续计算属性保持不变 ---
const selectedSortIndex = computed(() => {
  const index = sortOptions.value.findIndex(opt => opt.value === props.currentSort);
  return index > -1 ? index : 0;
});

const currentSortText = computed(() => {
  if (sortOptions.value.length > 0 && selectedSortIndex.value > -1 && selectedSortIndex.value < sortOptions.value.length) {
    return sortOptions.value[selectedSortIndex.value].text;
  }
  
  // 如果上面的查找失败 (例如在数据初始化期间)，提供一个更健壮的回退
  const fallbackOption = allSortOptions[props.currentSort];
  if (fallbackOption) {
    // 特殊处理 public-playlist 上下文中的 'sort_order'
    if (props.context === 'public-playlist' && props.currentSort === 'sort_order') {
      return '默认排序';
    }
    return fallbackOption.text;
  }
  
  return '排序'; // 最终的回退
});


const onSortChange = (e) => {
  const newIndex = e.detail.value;
  if (sortOptions.value[newIndex]) {
    const newSortValue = sortOptions.value[newIndex].value;
    emit('update:sort', newSortValue);
  }
};

// --- 分页逻辑 (保持不变) ---
const changePage = (newPage) => {
  if (newPage < 1 || newPage > props.pagination.total_pages) {
    return;
  }
  emit('update:page', newPage);
};

const onPageInput = (e) => {
  let newPage = parseInt(e.detail.value, 10);
  if (isNaN(newPage) || newPage < 1) {
    newPage = 1;
  } else if (newPage > props.pagination.total_pages) {
    newPage = props.pagination.total_pages;
  }
  emit('update:page', newPage);
};
</script>

<style scoped lang="scss">
.controls-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  background-color: #f8f9fa;
  border-bottom: 1px solid #e9ecef;
}

// --- 排序选择器样式 ---
.sort-selector {
  .picker-view {
    display: flex;
    align-items: center;
    padding: 6px 12px;
    border: 1px solid #ced4da;
    border-radius: 6px;
    background-color: #fff;
    font-size: 14px;
    cursor: pointer;

    &:hover {
      border-color: #80bdff;
    }
  }
  /* 【新增】 */
.sort-selector-placeholder {
  min-width: 150px; /* 与排序选择器宽度大致相同，防止布局跳动 */
}
  .dropdown-arrow {
    margin-left: 8px;
    color: #6c757d;
  }
}

// --- 分页器样式 ---
.paginator {
  display: flex;
  align-items: center;
}
.paginator-placeholder {
  min-width: 150px; /* 占位符，防止排序器跳动 */
}

.page-btn {
  width: 32px;
  height: 32px;
  line-height: 30px;
  text-align: center;
  padding: 0;
  margin: 0 5px;
  font-size: 20px;
  font-weight: bold;
  color: #007bff;
  background-color: #fff;
  border: 1px solid #dee2e6;
  border-radius: 6px;
  
  // uni-app H5 中 button 默认样式重置
  &::after {
    border: none;
  }

  &:disabled {
    color: #6c757d;
    background-color: #e9ecef;
    cursor: not-allowed;
  }
}

.page-info {
  display: flex;
  align-items: baseline;
  font-size: 14px;
}

.page-input {
  width: 40px;
  height: 32px;
  text-align: center;
  border: 1px solid #ced4da;
  border-radius: 6px;
  margin-right: 2px;
  font-size: 14px;
}

.page-total {
  margin-left: 5px;
  color: #6c757d;
}
</style>